<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/default.css"/>
		<link rel="stylesheet" type="text/css" href="css/style1.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<style type="text/css">
		 .m-icon-bluev{
        	display: inline-block;
        	width: 10px;
        	height: 10px;
        	background-color: #939634;
        	position: absolute;
		    left: 55px;
		    bottom: 17px;
		 }
		 .persontop dd{
		 	margin: 2px 0 0 72px;
		 }
		 /*根据每页设计的不同，去掉/加上相应的下划线*/
		 .mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item{
		 	border-bottom:0px ;
		 }
		.mui-table-view:after {
			    height: 0;
			}
	    .mui-table-view:before {
				height: 0;			   
			}
		.mui-table-view-cell:after {
		    	height: 0;
			}
			.lists2{
				padding: 8px 20px;
				background-color: #F1F6EE;
				box-shadow: 0px 13px 10px -15px rgba(204, 204, 204, 1);
				border-radius: 0px;
				margin: 10px;
				border: 1px solid #E3F1E5;
				border-radius: 4px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id='header'>
		    <a class="mui-action-back white-mid mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title white-big">黑皮书</h1>
		</header>
		<div class="mui-content">
		   <ul class="mui-table-view">
			        <li class="mui-table-view-cell persontop">
			            <a class="" href="">
			                <dl>
			                	<dt class="imgdt">
			                		<img src="http://via.placeholder.com/140x100" alt="" class="imgbig-peopl mui-pull-left"/>
			                		<i class="m-icon-bluev white-big">V</i>
			                	</dt>
			                	<dd class="blacker-big">金木研</dd>
			                	<dd class="grey-smallest">已认证</dd>
			                </dl>
			            </a>
			        </li>
			         <li class="mui-table-view-cell">
			         	<a>
							<p>“把每件事当作一个挑战，把自己活成一个牛逼”</p></a>
			        </li>
			</ul>
		    
		    <div class="mui-slider">
	    	<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted  hps-bg-slider">
	        <a class="mui-control-item" href="#item1">我发布的榜单</a>
	        <a class="mui-control-item" href="#item2">我关注的榜单</a>
	    </div>
	    <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6 mt_2"></div>
	    <div class="mui-slider-group">
	        <div id="item1" class="mui-slider-item mui-control-content mui-active">
	    		<ul class="mui-table-view">
	     			 <li class="mui-table-view-cell lists2">
	                	<h3 class="blacker-big">我发布的榜单</h3>
	                	<section>
			        		<dl class="leftslide fl">
			        			<dd class="blacker-small">EOS领涨<span class="green-small">+2.39%</span></dd>
			        			<dd>
				        			<span class="grey-light">总数：3</span>
				        			<span class="grey-light">上涨：2</span>
				        			<span class="grey-light">下跌：1</span>
			        			</dd>
			        			<dd>
				        			<img src="http://placehold.it/40x30" alt="" class='imgsma-peopl'/>
				        			<span class="blacker-small">金木研</span>
				        			<span class="grey-light">创建</span>
			        			</dd>
			        		</dl>
			        		
		        			<dl class='rightslide fr'>
		        				<dd class="tr blacker-small">平均涨跌</dd >
		        				<dd class="tr green-big">+1.29%</dd>
		        				<dt>
		        					<p>
		        						<span class="iconfont icon-yanjing"></span>
		        						<span class='grey-smaller'>2100</span>
		        						<span class="iconfont icon-xingxing"></span>
		        						<span class="grey-smaller">1920</span>
		        					</p>
		        				</dt>
		        			</dl>
        				</section>
	                </li>
	                 <li class="mui-table-view-cell lists2">
	                	<h3 class="blacker-big">每日币市龙虎榜</h3>
	                	<section>
			        		<dl class="leftslide fl">
			        			<dd class="blacker-small">EOS领涨<span class="green-small">+2.39%</span></dd>
			        			<dd>
				        			<span class="grey-light">总数：3</span>
				        			<span class="grey-light">上涨：2</span>
				        			<span class="grey-light">下跌：1</span>
			        			</dd>
			        			<dd>
				        			<img src="http://placehold.it/40x30" alt="" class='imgsma-peopl'/>
				        			<span class="blacker-small">金木研</span>
				        			<span class="grey-light">创建</span>
			        			</dd>
			        		</dl>
			        		
		        			<dl class='rightslide fr'>
		        				<dd class="tr blacker-small">平均涨跌</dd >
		        				<dd class="tr green-big">+1.29%</dd>
		        				<dt>
		        					<p>
		        						<span class="iconfont icon-yanjing"></span>
		        						<span class='grey-smaller'>2100</span>
		        						<span class="iconfont icon-xingxing"></span>
		        						<span class="grey-smaller">1920</span>
		        					</p>
		        				</dt>
		        			</dl>
        				</section>
	                </li>
	               </ul>
		    
	        
	        </div>

				<!--币种详情介绍-->
	        <div id="item2" class="mui-slider-item mui-control-content">
				<ul class="mui-table-view">
	                <li class="mui-table-view-cell lists2">
	                	<h3 class="blacker-big">我关注的榜单</h3>
	                	<section>
			        		<dl class="leftslide fl">
			        			<dd class="blacker-small">EOS领涨<span class="green-small">+2.39%</span></dd>
			        			<dd>
				        			<span class="grey-light">总数：3</span>
				        			<span class="grey-light">上涨：2</span>
				        			<span class="grey-light">下跌：1</span>
			        			</dd>
			        			<dd>
				        			<img src="http://placehold.it/40x30" alt="" class='imgsma-peopl'/>
				        			<span class="blacker-small">金木研</span>
				        			<span class="grey-light">创建</span>
			        			</dd>
			        		</dl>
			        		
		        			<dl class='rightslide fr'>
		        				<dd class="tr blacker-small">平均涨跌</dd >
		        				<dd class="tr green-big">+1.29%</dd>
		        				<dt>
		        					<p>
		        						<span class="iconfont icon-yanjing"></span>
		        						<span class='grey-smaller'>2100</span>
		        						<span class="iconfont icon-xingxing"></span>
		        						<span class="grey-smaller">1920</span>
		        					</p>
		        				</dt>
		        			</dl>
        				</section>
	                </li>
	                 <li class="mui-table-view-cell lists2">
	                	<h3 class="blacker-big">我关注的榜单11</h3>
	                	<section>
			        		<dl class="leftslide fl">
			        			<dd class="blacker-small">EOS领涨<span class="green-small">+2.39%</span></dd>
			        			<dd>
				        			<span class="grey-light">总数：3</span>
				        			<span class="grey-light">上涨：2</span>
				        			<span class="grey-light">下跌：1</span>
			        			</dd>
			        			<dd>
				        			<img src="http://placehold.it/40x30" alt="" class='imgsma-peopl'/>
				        			<span class="blacker-small">金木研</span>
				        			<span class="grey-light">创建</span>
			        			</dd>
			        		</dl>
			        		
		        			<dl class='rightslide fr'>
		        				<dd class="tr blacker-small">平均涨跌</dd >
		        				<dd class="tr green-big">+1.29%</dd>
		        				<dt>
		        					<p>
		        						<span class="iconfont icon-yanjing"></span>
		        						<span class='grey-smaller'>2100</span>
		        						<span class="iconfont icon-xingxing"></span>
		        						<span class="grey-smaller">1920</span>
		        					</p>
		        				</dt>
		        			</dl>
        				</section>
	                </li>
	               </ul>
	        
	        
	        </div>
		</div>
		</div>
		    
		    
		    
		    
		    
		    
		    
		    
		    
		    
		</div>
		
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>